import React from 'react';
import { Layout, Menu } from 'antd';
import { useNavigate } from 'react-router-dom'

function SiderDom(props) {
  const navigate = useNavigate()
  const { Sider } = Layout
  const onSelect = ({ item, key, keyPath, selectedKeys, domEvent }) => {
    props?.callBack({
      name: item.props.title,
      label: item.props.title,
      key: key,
      action: true
    })
    navigate(key)
  }

  return (
    <Sider trigger={null} collapsible collapsed={props.collapsed}>
      <div className="logo"></div>
      <Menu
        theme="dark"
        mode="inline"
        key={props.defaultSelectedKeys}
        defaultSelectedKeys={[props.defaultSelectedKeys]}
        forceSubMenuRender
        items={props.menuList}
        onClick={onSelect}
      />
    </Sider>
  )
}

export default SiderDom;